<template>
  <div class="choice-unit-wp">
  	<div class="name">
  		<div v-if="_d.obj.name" class="inner">{{_d.obj.name}}</div>
  		<div v-else class="placeholder">-请选择-</div>
  	</div>
  	<div v-if="isInit" class="add-btn" @click="openSupplier()">
  		<el-icon><Plus/></el-icon>
  	</div>

  	<el-dialog v-model="tc.visible" draggable :close-on-click-modal="false" width="1000px">
  		<template #header>
				<div style="color: #fff">选择供应商</div>
			</template>
			<div style="min-height: 400px;">
				<el-table :data="tc.list" style="width: 100%" border>
					<el-table-column type="index" label="序号" width="55" align="center" />
					<el-table-column prop="companyName" label="公司名称" align="center" show-overflow-tooltip />
					<el-table-column prop="unifiedSocialCode" label="统一社会信用代码" align="center" show-overflow-tooltip />
					<el-table-column prop="city" label="地址" align="center" show-overflow-tooltip />
					<el-table-column prop="registeredCapital" label="注册资本" width="80" align="center" show-overflow-tooltip />
					<el-table-column prop="scope" label="主营内容" align="center" show-overflow-tooltip />
					<el-table-column label="操作" align="center" width="120">
						<template #default="scope">
							<el-button size="small" text type="primary" @click="setChoice(scope.row)">选择</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
  	</el-dialog>
  </div>
</template>

<script setup>
	import { reactive, ref, watch, onMounted } from 'vue'
	import {Plus} from '@element-plus/icons-vue'
	import {$get, $post} from '/@/utils/request';

	const emits = defineEmits(['update:modelValue'])

	const props = defineProps({
		modelValue: {
			type: String
		},
		isInit: {
			type: Boolean,
			default: true
		}
	})

	const _d = reactive({
		obj: {
			name: '',
			id: ''
		}
	})

	watch(() => props.modelValue, (val) => {
		if(val) {
			try {
				let data = JSON.parse(val);
				_d.obj.id = data.id;
				_d.obj.name = data.name;
			} catch(err) {
				console.log(err);
			}
		}
	}, {
		immediate: true
	})

	const tc = reactive({
		visible: false,
		list: []
	})
	
	onMounted(() => {
		if(props.isInit) {
			getSupplierList();
		}
	})

	// 获取供应商列表
	async function getSupplierList() {
		let projectId = localStorage.getItem('project_id');
		if(!projectId) {
			return;
		}
		var res = await $post('/projectService/getpartproviders/'+projectId);
		tc.list = res.result || [];
	}

	// 显示弹窗
	function openSupplier() {
		tc.visible = true;
	}

	// 保存选择
	function setChoice(row) {
		emits('update:modelValue', JSON.stringify({
			id: row.id,
			name: row.companyName
		}))
		tc.visible = false;
	}


</script>

<style lang="scss" scoped>
.choice-unit-wp {
	display: inline-block;
	&:after {
		content: '';
		display: block;
		clear: both;
	}
	.name {
		float: left;
		margin-right: 5px;
	}
	.placeholder {
		color: #aaa;
	}
	.add-btn {
		float: left;
		border: 1px solid #027BFE;
		border-radius: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		color: #027BFE;
		cursor: pointer;
	}
}
</style>